<template>
  <div class="box">
    <div class="top">
      <div class="tab" @click="clickMore('recommed')">
        <span class="type purple-border">推荐电影</span>
        <span class="more">查看更多</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="group">
        <productItem
          v-for="item in recommendList"
          :key="item.movieId"
          :item="item"
        ></productItem>
      </div>
    </div>
    <div class="top">
      <div class="tab" @click="clickMore('rating')">
        <span class="type red-border">评分最高</span>
        <span class="more">查看更多</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="group">
        <productItem
          v-for="item in moviesByRatingList"
          :key="item.movieId"
          :item="item"
        ></productItem>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/utils/request";
import typeItem from "../../components/typeItem.vue";
import movieItem from "../../components/movieItem.vue";
import productItem from "../../components/productItem.vue";
export default {
  components: {
    typeItem,
    movieItem,
    productItem,
  },
  data() {
    return {
      moviesByRatingList: [],
      recommendList: [],
      userInfo: {},
      isOpen: false,
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    console.log(this.userInfo);
    this.$store.dispatch("setUser", this.userInfo);
    this.getAllRatings();
    this.getMoviesByRating();
    this.getRaecommendMovies();
  },
  methods: {
    clickMore(e) {
      this.$router.push({
        name: "showMovies",
        params: {
          type: e,
        },
      });
    },
    getAllRatings() {
      const params = {
        userId: this.userInfo.userId,
      };
      // 发送 GET 请求
      service
        .get("/user/getAllRatings", { params })
        .then((res) => {
          console.log("查询所有评分记录");
          if (res.data) {
            localStorage.setItem("allRatings", JSON.stringify(res.data));
          }
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },

    //直接推荐电影
    getRaecommendMovies() {
      const params = {
        page: 0,
        size: 7,
        userId: this.userInfo.userId,
      };
      // 发送 GET 请求
      service
        .get("/movies/recommendMovies", { params })
        .then((res) => {
          console.log("获取推荐电影");
          this.recommendList = res.data;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },

    //通过评分推荐电影
    getMoviesByRating() {
      const params = {
        page: 0,
        size: 7,
      };
      // 发送 GET 请求
      service
        .get("/movies/recommendByRating", { params })
        .then((res) => {
          console.log("通过评分获取推荐列表");
          this.moviesByRatingList = res.data;
        })
        .catch((error) => {
          console.error("请求失败:", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@icon-height: 3rem;
@item-hight: 10rem;
@color-more: rgb(43, 70, 201); //查看更多的字体颜色

@num-28: 1.5rem;
@num-10: 0.5rem;
@num-24: 1.3rem;
@num-18: 0.8rem;

.box {
  width: 100%;
  height: 100%;
  font-size: @num-24;

  .tab {
    width: 98%;
    margin-top: @num-10;
    display: flex;
    justify-content: space-between;
    height: @num-28;
    line-height: @num-28;
    font-size: @num-28;
    position: relative;

    .type {
      padding: 0 @num-10;
    }

    .more {
      font-size: @num-18;
      margin-right: @num-18;
      color: @color-more;
      cursor: pointer;
    }

    i {
      height: @num-28;
      cursor: pointer;
      position: absolute;
      right: 0;
      line-height: @num-28;
      font-size: @num-18;
      color: @color-more;
    }
  }

  .top {
    width: 100%;

    .group {
      width: 100%;
      margin-top: 1rem;
      font-size: 1.4rem;
      display: flex;
      margin-bottom: 3rem;
      gap: 0.5rem;
      flex-wrap: wrap;
      row-gap: 0.8rem;
    }
  }

  .purple-border {
    border-left: 0.4rem solid purple;
  }

  .red-border {
    border-left: 0.4rem solid red;
  }

  .green-border {
    border-left: 0.4rem solid green;
  }
}
</style>
